<template>
    <el-form-item label="行为兴趣意向" prop="title">
        <el-radio-group v-model="createform.audience.smart_interest_action" size="small" @change="swicthAction">
            <el-radio-button label="">不开启</el-radio-button>
            <el-radio-button label="RECOMMEND">系统推荐</el-radio-button>
            <el-radio-button label="CUSTOM">自定义</el-radio-button>
        </el-radio-group>
        <div class="cascader_box" v-if="createform.audience.smart_interest_action=='CUSTOM'" key="CUSTOM">
            <el-form-item label="" :prop="`audience.actionAllCheck`">
                <div class="form_title flexbox flexcenter font_14">行为</div>
                <div class="flexbox flexcenter">
                    在
                    <el-select v-model="createform.audience.action_scene" multiple collapse-tags placeholder="" size="small" style="margin:0 12px;width:208px" @change="changeAction">
                        <el-option :label="item.name" :value="item.id" v-for="(item,index) in actionList" :key="index"></el-option>
                    </el-select>
                    中，选择用户
                    <el-select v-model="createform.audience.action_days" @change="selectActionDay" placeholder="" size="small" style="margin:0 12px;width:90px">
                        <el-option :label="item.label" :value="item.id" v-for="(item,index) in actionDay" :key="index"></el-option>
                    </el-select>
                    内发生的行为
                </div>
                <div style="margin-top:15px" class="flexbox flexcenter">
                    <span class="font_14 color_01">行为类目词搜索：</span>
                    <el-cascader v-model="createform.audience.action_val" ref="actionRef" filterable size="small" class="flex" collapse-tags :options="createform.audience.actionList" :props="{multiple:true,label:'name',value:'id',}" @change="getActionVal" style="width:330px">
                    </el-cascader>
                </div>
                <div style="margin-top:15px" class="flexbox flexcenter">
                    <span class="font_14 color_01">行为关键词搜索：</span>
                    <!-- <el-input placeholder="行为关键词" clearable class="flex" size="small" prefix-icon="el-icon-search" v-model="actionKeyText">
                    </el-input> -->
                    <el-select v-model="actionQuery" filterable remote reserve-keyword value-key="id" size="small"  placeholder="请输入行为关键词" class="key_el_select flex" popper-class="key_select" :remote-method="remoteMethod" :loading="s_loading" @change="selectAction">
                        <template slot="prefix">
                            <div class="aweme_icon" style="line-height:39px">
                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12.0208 11.0782L14.4044 13.4612C14.665 13.7217 14.665 14.144 14.4045 14.4045C14.144 14.665 13.7217 14.665 13.4612 14.4044L11.0782 12.0208C10.016 12.8723 8.69483 13.3354 7.3335 13.3335C4.0215 13.3335 1.3335 10.6455 1.3335 7.3335C1.3335 4.0215 4.0215 1.3335 7.3335 1.3335C10.6455 1.3335 13.3335 4.0215 13.3335 7.3335C13.3354 8.69483 12.8723 10.016 12.0208 11.0782ZM10.6835 10.5835C11.5296 9.71342 12.0021 8.54712 12.0002 7.3335C12.0002 4.75483 9.9115 2.66683 7.3335 2.66683C4.75483 2.66683 2.66683 4.75483 2.66683 7.3335C2.66683 9.9115 4.75483 12.0002 7.3335 12.0002C8.54712 12.0021 9.71342 11.5296 10.5835 10.6835L10.6835 10.5835Z" fill="#616C85" />
                                </svg>
                            </div>
                        </template>
                        <el-option v-for="item in actionOption" :key="item.id" :label="item.name" :value="item">
                            <div class="flexbox flexcenter flexbetween">
                                <div class="at_left">
                                    <div class="at_name">{{item.name}}</div>
                                    <div class="at_num color_03">覆盖人数：{{item.num}}</div>
                                </div>                                
                                <div class="at_right">
                                    <el-button type="text" :disabled="getDisableAction(item)" @click.stop="addActionKey(item)">添加</el-button>
                                    <el-button type="text" @click.stop="findActionKey(item)">查关键词</el-button>
                                </div>
                            </div>
                        </el-option>
                    </el-select>
                </div>
                <div class="flexbox flexbetween" style="margin-top:16px">
                    <div class="cascader_left">
                        <div class="cas_header2 flexbox flexcenter">
                            <el-tabs v-model="actionTab" class="tab_style">
                                <el-tab-pane label="类目词" name="1"></el-tab-pane>
                                <el-tab-pane label="关键词" name="2"></el-tab-pane>
                            </el-tabs>
                        </div>
                        <template v-if="actionTab==1">
                            <div class="cas_header flexbox flexcenter">
                                行为类目词
                            </div>
                            <div v-loading="als_loadding" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.2)">
                                <div class="cas_center over_box flexbox">
                                    <el-cascader-panel ref="actionRef" v-model="createform.audience.action_val" :options="createform.audience.actionList" :props="{multiple:true,label:'name',value:'id',}" @change="getActionVal">
                                        <template slot-scope="{ node, data }">
                                            <div @click="getActionData(data)">
                                                {{data.name}}
                                            </div>
                                        </template>
                                    </el-cascader-panel>
                                </div>
                            </div>
                            <div class="word_box flexbox flexcolumn flexjust">
                                <span>关键词推荐</span>
                                <div v-if="actionDataLm.name">
                                    <el-link type="primary" :underline="false" @click="findMoreActionKey">查看更多相关{{actionDataLm.name}}的关键词</el-link>
                                </div>
                                <div class="font_13 color_02" v-else>选择类目词后, 根据相关性推荐关键词</div>
                            </div>
                        </template>
                        <template v-else>
                            <div class="cas_header flexbox flexcenter">
                                {{actionData.name?actionData.name:'关键词'}}
                            </div>
                            <div v-loading="aky_loadding" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.2)">
                                <div class="over_box" style="height:268px">
                                    <div class="action_key_item flexbox flexcenter" v-for="(item,index) in createform.audience.action_key_list" :key="index">
                                        <div class="act_key_name flex">{{item.name}}</div>
                                        <div class="act_key_num">{{item.num}}</div>
                                        <div class="act_key_btn">
                                            <el-link type="primary" :disabled="getDisableAction(item)" :underline="false" @click="addActionKey(item,index)">添加</el-link>
                                            <el-link type="primary" :underline="false" style="margin-left:10px" @click="findActionKey(item)">查关键词</el-link>
                                        </div>
                                    </div>
                                </div>
                            </div>
                             <div style="line-height: 32px;border-top: 1px solid #EBEBEB;padding-left: 16px;color: #4475ff;cursor: pointer;" v-if="actionData.name" @click="addAllActionKey">
                                添加全部“{{actionData.name}}”相关关键词
                            </div>
                        </template>
                    </div>

                    <div class="cascader_right">
                        <div class="cas_header2 flexcolumn flexbox flexjust">
                            <div class="flexbox flexcenter flexbetween">
                                <div>还可添加 <el-link type="primary" :underline="false">{{350-createform.audience.actionAllCheck.length}}</el-link> 个</div>
                                <el-link type="primary" :underline="false" @click="clearActionKey">清空</el-link>
                            </div>
                            <div style="margin-top:5px">
                                <span class="talent_12">类目词：{{createform.audience.action_text.length}}</span>
                                <span class="talent_12">关键词：{{createform.audience.action_key_text.length}}</span>
                            </div>
                        </div>
                        <div class="cas_header flexbox flexcenter">
                            <span class="flex">内容</span>
                            <span class="flex">预估覆盖数</span>
                        </div>
                        <div class="has_talent_box over_box" style="height:269px">
                            <div class="has_talent_item flexbox flexcenter" v-for="(item,index) in createform.audience.actionAllCheck" :key="index">
                                <div class="has_talent_name flex">{{item.name}}</div>
                                <div class="has_talent_num flex flexbox flexbetween">
                                    <span>{{item.num}}</span>
                                    <div>
                                        <!-- <el-link :underline="false" icon="el-icon-search" @click="findActionKey(item)"></el-link> -->
                                        <el-link :underline="false" icon="el-icon-close" @click="deletAction(item,index)"></el-link>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="" :prop="`audience.interestAllCheck`">
                <div class="form_title flexbox flexcenter font_14" style="margin-top:25px">兴趣</div>
                <div style="margin-top:15px" class="flexbox flexcenter">
                    <span class="font_14 color_01">兴趣类目词搜索：</span>
                    <el-cascader v-model="createform.audience.interest_val" ref="interestRef" filterable size="small" class="flex" collapse-tags :options="createform.audience.interestList" :props="{multiple:true,label:'name',value:'id',}" @change="getInterestVal" style="width:330px">
                    </el-cascader>
                </div>
                <div style="margin-top:15px" class="flexbox flexcenter">
                    <span class="font_14 color_01">兴趣关键词搜索：</span>
                    <!-- <el-input placeholder="兴趣关键词" @change="findMoreInterestKey()" clearable class="flex" size="small" prefix-icon="el-icon-search" v-model="createform.audience.interestKeyText">
                    </el-input> -->
                    <el-select v-model="interestQuery" filterable remote reserve-keyword value-key="id" size="small"  placeholder="请输入兴趣关键词" class="key_el_select flex" popper-class="key_select" :remote-method="remoteMethodXq" :loading="s_loading" @change="selectInterest">
                        <template slot="prefix">
                            <div class="aweme_icon" style="line-height:39px">
                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12.0208 11.0782L14.4044 13.4612C14.665 13.7217 14.665 14.144 14.4045 14.4045C14.144 14.665 13.7217 14.665 13.4612 14.4044L11.0782 12.0208C10.016 12.8723 8.69483 13.3354 7.3335 13.3335C4.0215 13.3335 1.3335 10.6455 1.3335 7.3335C1.3335 4.0215 4.0215 1.3335 7.3335 1.3335C10.6455 1.3335 13.3335 4.0215 13.3335 7.3335C13.3354 8.69483 12.8723 10.016 12.0208 11.0782ZM10.6835 10.5835C11.5296 9.71342 12.0021 8.54712 12.0002 7.3335C12.0002 4.75483 9.9115 2.66683 7.3335 2.66683C4.75483 2.66683 2.66683 4.75483 2.66683 7.3335C2.66683 9.9115 4.75483 12.0002 7.3335 12.0002C8.54712 12.0021 9.71342 11.5296 10.5835 10.6835L10.6835 10.5835Z" fill="#616C85" />
                                </svg>
                            </div>
                        </template>
                        <el-option v-for="item in interestOption" :key="item.id" :label="item.name" :value="item">
                            <div class="flexbox flexcenter flexbetween">
                                <div class="at_left">
                                    <div class="at_name">{{item.name}}</div>
                                    <div class="at_num color_03">覆盖人数：{{item.num}}</div>
                                </div>                                
                                <div class="at_right">
                                    <el-button type="text" :disabled="getDisableInterest(item)" @click.stop="addInterestKey(item)">添加</el-button>
                                    <el-button type="text" @click.stop="findInterestKey(item)">查关键词</el-button>
                                </div>
                            </div>
                        </el-option>
                    </el-select>
                </div>
                <div class="flexbox flexbetween" style="margin-top:16px">
                    <div class="cascader_left">
                        <div class="cas_header2 flexbox flexcenter">
                            <el-tabs v-model="interestTab" @tab-click="handleClick" class="tab_style">
                                <el-tab-pane label="类目词" name="1"></el-tab-pane>
                                <el-tab-pane label="关键词" name="2"></el-tab-pane>
                            </el-tabs>
                        </div>
                        <template v-if="interestTab==1">
                            <div class="cas_header flexbox flexcenter">
                                兴趣类目词
                            </div>
                            <div v-loading="ils_loadding" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.2)">
                                <div class="cas_center over_box flexbox">
                                    <el-cascader-panel ref="interestRef" v-model="createform.audience.interest_val" :options="createform.audience.interestList" :props="{multiple:true,label:'name',value:'id',}" @change="getInterestVal">
                                        <template slot-scope="{ node, data }">
                                            <div @click="getInterestData(data)">
                                                {{data.name}}
                                            </div>
                                        </template>
                                    </el-cascader-panel>
                                </div>
                            </div>
                            <div class="word_box flexbox flexcolumn flexjust">
                                <span>关键词推荐</span>
                                <div v-if="interestDataLm.name">
                                    <el-link type="primary" :underline="false" @click="findMoreInterestKey">查看更多相关{{interestDataLm.name}}的关键词</el-link>
                                </div>
                                <div class="font_13 color_02" v-else>选择类目词后, 根据相关性推荐关键词</div>
                            </div>
                        </template>
                        <template v-else>
                            <div class="cas_header flexbox flexcenter">
                                {{interestData.name?interestData.name:'关键词'}}
                            </div>
                            <div v-loading="ils_loadding" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.2)">
                                <div class="over_box" style="height:268px">
                                    <div class="action_key_item flexbox flexcenter" v-for="(item,index) in createform.audience.interest_key_list" :key="index">
                                        <div class="act_key_name flex">{{item.name}}</div>
                                        <div class="act_key_num">{{item.num}}</div>
                                        <div class="act_key_btn">
                                            <el-link type="primary" :disabled="getDisableInterest(item)" :underline="false" @click="addInterestKey(item,index)">添加</el-link>
                                            <el-link type="primary" :underline="false" style="margin-left:10px" @click="findInterestKey(item)">查关键词</el-link>
                                        </div>
                                    </div>
                                </div>
                            </div>
                                <div style="line-height: 32px;border-top: 1px solid #EBEBEB;padding-left: 16px;color: #4475ff;cursor: pointer;" v-if="interestData.name" @click="addAllInterestKey">
                                添加全部“{{interestData.name}}”相关关键词
                            </div>
                        </template>
                    </div>

                    <div class="cascader_right">
                        <div class="cas_header2 flexcolumn flexbox flexjust">
                            <div class="flexbox flexcenter flexbetween">
                                <div>还可添加 <el-link type="primary" :underline="false">{{350-createform.audience.interestAllCheck.length}}</el-link> 个</div>
                                <el-link type="primary" :underline="false" @click="clearInterestKey">清空</el-link>
                            </div>
                            <div style="margin-top:5px">
                                <span class="talent_12">类目词：{{createform.audience.interest_text.length}}</span>
                                <span class="talent_12">关键词：{{createform.audience.interest_key_text.length}}</span>
                            </div>
                        </div>
                        <div class="cas_header flexbox flexcenter">
                            <span class="flex">内容</span>
                            <span class="flex">预估覆盖数</span>
                        </div>
                        <div class="has_talent_box over_box" style="height:269px">
                            <div class="has_talent_item flexbox flexcenter" v-for="(item,index) in createform.audience.interestAllCheck" :key="index">
                                <div class="has_talent_name flex">{{item.name}}</div>
                                <div class="has_talent_num flex flexbox flexbetween">
                                    <span>{{item.num}}</span>
                                    <div>
                                        <!-- <el-link :underline="false" icon="el-icon-search" @click="findInterestKey(item)"></el-link> -->
                                        <el-link :underline="false" icon="el-icon-close" @click="deletInterest(item,index)"></el-link>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-form-item>
        </div>
    </el-form-item>
</template>

<script>
export default {
    props: ["dataForm","createform"],
    name: "",
    data() {
        return {
            als_loadding:false,
            aky_loadding:false,
            ils_loadding:false,
            iky_loadding:false,
            actionList: [
                {
                    id: "E-COMMERCE",
                    name: "电商互动行为",
                },
                {
                    id: "NEWS",
                    name: "资讯互动行为",
                },
                {
                    id: "APP",
                    name: "APP推广互动行为",
                },
            ],
            actionDay: [
                {
                    id: "7",
                    label: "7天",
                },
                {
                    id: "15",
                    label: "15天",
                },
                {
                    id: "30",
                    label: "30天",
                },
                {
                    id: "60",
                    label: "60天",
                },
                {
                    id: "90",
                    label: "90天",
                },
                {
                    id: "180",
                    label: "180天",
                },
                {
                    id: "365",
                    label: "365天",
                },
            ],
            actionTab:'1',
            actionKeyText:"",
            actionQuery:"",
            actionOption:[],
            actionDataLm:{},
            actionData:{},

            interestTab:'1',
            interestQuery:"",
            interestOption:[],
            interestDataLm:{},
            interestData:{},
        };
    },
    created() {
        this.getActionList();
        this.getInterestList();
    },
    computed: {
        
    },
    methods: {
        //获取行为类目词
        async getActionList() {
            this.als_loadding = true;
            const { data: res } = await this.$http.post(
                "launch/Getinfo/get_interest_action",
                {
                    advertiser_id: this.dataForm.tableData[0].hasAdver.advertiser_id,
                    action_scene: this.createform.audience.action_scene,
                    action_days: this.createform.audience.action_days,
                }
            );
            if (res.code !== 200) {
                this.als_loadding = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.als_loadding = false;
                this.createform.audience.actionList = res.data;
            }
            this.sessionSave();
        },

        //获取兴趣类目
        async getInterestList() {
            this.ils_loadding = true;
            const { data: res } = await this.$http.post(
                "launch/Getinfo/get_interest_category",
                {
                    advertiser_id: this.dataForm.tableData[0].hasAdver.advertiser_id,
                }
            );
            if (res.code !== 200) {
                this.ils_loadding = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.ils_loadding = false;
                this.createform.audience.interestList = res.data;
            }
            this.sessionSave();
        },

        getDisableAction(item) {
            let is_true = false
            for(let i in this.createform.audience.actionAllCheck){
                if(this.createform.audience.actionAllCheck[i].id == item.id){
                    is_true = true
                }
            }
            return is_true
        },

        getDisableInterest(item) {
            let is_true = false
            for(let i in this.createform.audience.interestAllCheck){
                if(this.createform.audience.interestAllCheck[i].id == item.id){
                    is_true = true
                }
            }
            return is_true
        },
        

        // getActionList() {
        //     this.$emit("getActionList");
        // },
        // getInterestList() {
        //     this.$emit("getInterestList");
        // },
        // getActionKey() {
        //     this.$emit("getActionKey");
        // },
        // getInterestKey() {
        //     this.$emit("getInterestKey");
        // },
        // 切换行为兴趣意向
        swicthAction() {
            if (this.createform.audience.smart_interest_action == "CUSTOM") {
                this.actionTab = '1'
                this.interestTab = '1'
                this.getActionList();
                this.getInterestList();
            }
            this.sessionSave();
        },

        // 行为互动筛选
        changeAction() {
            if (this.createform.audience.action_scene.length == 0) {
                this.createform.audience.action_scene = [
                    "E-COMMERCE",
                    "NEWS",
                    "APP",
                ];
            }
            this.getActionList();
            this.getActionSearch('KEYWORD')
        },

        // 行为天数
        selectActionDay() {
            this.getActionList();
            this.getActionSearch('KEYWORD')
        },

        // 行为类目选择
        getActionVal() {
            this.actionTab = "1";
            this.$nextTick(() => {
                let CheckedNodes = this.$refs.actionRef.getCheckedNodes();
                let checkText = [];
                CheckedNodes = CheckedNodes.filter(
                    (option) => !(option.parent && option.parent.checked)
                );
                for (let i in CheckedNodes) {
                    checkText.push({
                        name: CheckedNodes[i].data.name,
                        id: CheckedNodes[i].data.id,
                        num: CheckedNodes[i].data.num,
                    });
                }
                this.createform.audience.action_text = checkText;
                this.createform.audience.actionAllCheck =
                    this.createform.audience.action_text.concat(
                        this.createform.audience.action_key_text
                    );
                this.sessionSave();
            });
        },
        //添加全部行为关键词
        addAllActionKey(){
            for (const iterator of this.createform.audience.action_key_list) {
                this.addActionKey(iterator)
            }
        },
        // 添加行为关键词
        addActionKey(item, index) {
            this.createform.audience.action_key_text.push(item);
            this.createform.audience.actionAllCheck =
                this.createform.audience.action_text.concat(
                    this.createform.audience.action_key_text
                );
            // this.createform.audience.action_key_list[index].check = true;
            this.sessionSave();
        },

        // 获取行为节点
        getActionData(data) {
            // this.createform.audience.actionKeyText = data.name;
            // this.createform.audience.actionKeyId = data.id
            this.actionDataLm = data
            this.sessionSave();
        },

        // 查找更多类目词
        findMoreActionKey() {
            if (!this.actionDataLm.id) {
                return;
            }
            this.actionTab = "2";
            this.actionData = this.actionDataLm
            this.getActionSearch('CATEGORY',this.actionDataLm.id)
        },

        // 查找更多关键词
        findActionKey(item) {
            this.actionTab = "2";
            // this.createform.audience.actionKeyText = item.name;
            // this.createform.audience.actionKeyId = item.id
            this.actionData = item
            this.getActionSearch('KEYWORD',this.actionData.id)
            // this.getActionKey();
        },
        
        // 搜索关键词
        remoteMethod(query) {
            if (query !== "") {
                this.getActionKey(query);
            } else {
                this.actionOption = [];
            }
        },

        selectAction(item){
            this.findActionKey(item)
        },

        //获取行为类关键词
        async getActionKey(query) {
            this.aky_loadding = true;
            const { data: res } = await this.$http.post(
                "launch/Getinfo/get_interest_keyword",
                {
                    advertiser_id:this.dataForm.tableData[0].hasAdver.advertiser_id,
                    query_words: query,
                    action_scene: this.createform.audience.action_scene,
                    action_days: this.createform.audience.action_days,
                }
            );
            if (res.code !== 200) {
                this.aky_loadding = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.aky_loadding = false;
                this.actionOption = res.data;
            }
            this.sessionSave();
        },

        //获取行为类关键词-推荐
        async getActionSearch(tag_type,id) {
            this.aky_loadding = true;
            const { data: res } = await this.$http.post(
                "launch/Getinfo/get_category_suggest",
                {
                    advertiser_id: this.dataForm.tableData[0].hasAdver.advertiser_id,
                    id:id,
                    tag_type:tag_type,
                    targeting_type:'ACTION',
                    action_scene: this.createform.audience.action_scene,
                    action_days: this.createform.audience.action_days,
                }
            );
            if (res.code !== 200) {
                this.aky_loadding = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.aky_loadding = false;
                this.createform.audience.action_key_list = res.data
            }
            this.sessionSave();
        },
        

        // 行为类目删除
        deletAction(item, index) {
            let a = this.createform.audience.action_val.filter((it) => {
                if (!it.includes(item.id)) {
                    return it;
                }
            });
            let b = this.createform.audience.action_key_text.filter((it) => {
                if (it.id != item.id) {
                    return it;
                }
            });

            let c = this.createform.audience.action_text.filter((it) => {
                if (it.id != item.id) {
                    return it;
                }
            });

            let num = this.createform.audience.action_key_list.findIndex(
                (val) => val.id == item.id
            );
            if (num != -1) {
                this.createform.audience.action_key_list[num].check = false;
            }
            this.createform.audience.action_val = a;
            this.createform.audience.action_key_text = b;
            this.createform.audience.action_text = c;
            this.createform.audience.actionAllCheck.splice(index, 1);
            this.sessionSave();
        },

        // 清空行为关键词
        clearActionKey() {
            this.createform.audience.action_val = [];
            this.createform.audience.action_key_text = [];
            this.createform.audience.action_text = [];
            this.createform.audience.actionAllCheck = [];
            for (let i in this.createform.audience.action_key_list) {
                this.createform.audience.action_key_list[i].check = false;
            }
            this.sessionSave();
        },

        // 搜索兴趣关键词
        remoteMethodXq(query) {
            if (query !== "") {
                this.getInterestKey(query);
            } else {
                this.interestOption = [];
            }
        },

        selectInterest(item){
            this.findInterestKey(item)
        },

        //获取兴趣关键词
        async getInterestKey(query) {
            this.ils_loadding = true;
            const { data: res } = await this.$http.post(
                "launch/Getinfo/get_category_keyword",
                {
                    advertiser_id: this.dataForm.tableData[0].hasAdver.advertiser_id,
                    query_words: query,
                }
            );
            if (res.code !== 200) {
                this.ils_loadding = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.ils_loadding = false;
                this.interestOption = res.data;
            }
            this.sessionSave();
        },


        //获取兴趣类关键词-推荐
        async getInterestSearch(tag_type,id) {
            this.ils_loadding = true;
            const { data: res } = await this.$http.post(
                "launch/Getinfo/get_category_suggest",
                {
                    advertiser_id: this.dataForm.tableData[0].hasAdver.advertiser_id,
                    id:id,
                    tag_type:tag_type,
                    targeting_type:'INTEREST',
                    action_scene: '',
                    action_days: '',
                }
            );
            if (res.code !== 200) {
                this.ils_loadding = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.ils_loadding = false;
                this.createform.audience.interest_key_list = res.data
            }
            this.sessionSave();
        },

        // 兴趣类目选择
        getInterestVal() {
            this.interestTab = "1";
            this.$nextTick(() => {
                let CheckedNodes = this.$refs.interestRef.getCheckedNodes();
                let checkText = [];
                CheckedNodes = CheckedNodes.filter(
                    (option) => !(option.parent && option.parent.checked)
                );
                for (let i in CheckedNodes) {
                    checkText.push({
                        name: CheckedNodes[i].data.name,
                        id: CheckedNodes[i].data.id,
                        num: CheckedNodes[i].data.num,
                    });
                }
                this.createform.audience.interest_text = checkText;
                this.createform.audience.interestAllCheck =
                    this.createform.audience.interest_text.concat(
                        this.createform.audience.interest_key_text
                    );
                this.sessionSave();
            });
        },
        // 全选-添加行为关键词
        addAllInterestKey(){
            for (const iterator of this.createform.audience.interest_key_list) {
                this.addInterestKey(iterator)
            }
        },
        // 添加行为关键词
        addInterestKey(item, index) {
            this.createform.audience.interest_key_text.push(item);
            this.createform.audience.interestAllCheck =
                this.createform.audience.interest_text.concat(
                    this.createform.audience.interest_key_text
                );
            // this.createform.audience.interest_key_list[index].check = true;
            this.sessionSave();
        },

        // 获取行为节点
        getInterestData(data) {
            // this.createform.audience.interestKeyText = data.name;
            // this.createform.audience.interestKeyId = data.id;
            this.interestDataLm = data
            this.sessionSave();
        },

        // 查找更多关键词
        findMoreInterestKey() {
            if (!this.interestDataLm.id) {
                return;
            }
            this.interestTab = "2";
            this.interestData = this.interestDataLm
            this.getInterestSearch('CATEGORY',this.interestDataLm.id);
        },

        // 查找关键词
        findInterestKey(item) {
            this.interestTab = "2";
            // this.createform.audience.interestKeyText = item.name;
            this.createform.audience.interestKeyId = item.id;
            this.interestData = item
            this.getInterestSearch('KEYWORD',this.interestData.id);
        },

        // 行为类目删除
        deletInterest(item, index) {
            let a = this.createform.audience.interest_val.filter((it) => {
                if (!it.includes(item.id)) {
                    return it;
                }
            });
            let b = this.createform.audience.interest_key_text.filter((it) => {
                if (it.id != item.id) {
                    return it;
                }
            });

            let c = this.createform.audience.interest_text.filter((it) => {
                if (it.id != item.id) {
                    return it;
                }
            });

            let num = this.createform.audience.interest_key_list.findIndex(
                (val) => val.id == item.id
            );
            if (num != -1) {
                this.createform.audience.interest_key_list[num].check = false;
            }
            this.createform.audience.interest_val = a;
            this.createform.audience.interest_key_text = b;
            this.createform.audience.interest_text = c;
            this.createform.audience.interestAllCheck.splice(index, 1);
            this.sessionSave();
        },

        // 清空行为关键词
        clearInterestKey() {
            this.createform.audience.interest_val = [];
            this.createform.audience.interest_key_text = [];
            this.createform.audience.interest_text = [];
            this.createform.audience.interestAllCheck = [];
            for (let i in this.createform.audience.interest_key_list) {
                this.createform.audience.interest_key_list[i].check = false;
            }
            this.sessionSave();
        },

        sessionSave() {
            this.$emit("sessionSave");
        },
    },
    components: {},
};
</script>


<style scoped>

.key_select .el-select-dropdown__item {
    height: auto;
    line-height: unset;
    padding-top: 5px;
    padding-bottom: 5px;
}
.key_el_select .el-input__prefix {
    left: unset;
    right: 10px;
}
.key_el_select .el-input--small .el-input__inner {
    padding-left: 15px;
}

.at_name{
    font-size: 14px;
}
.at_num{
    font-size: 13px;
    margin-top: 5px;
}
</style>

